import React, { Component } from "react";
import { Checkbox, Radio, Form } from "antd";
import Chooser from "components/chooser";
import "styles/supplier-management/airline-config/airline-config.scss";
import HotelServer from "../hotel-server";

const RadioGroup = Radio.Group;
const FormItem = Form.Item;

@Form.create()
class CheckboxRadio extends Component {
  constructor(props) {
    super(props);
    this.isStartGetGroupName = false;
    this.state = {
      isShow: false,
      showUser: false, // 显示选择人员组组件
      name: "", //
    };
  }

  componentWillReceiveProps(nextProps) {
    this.initAndUpdate(nextProps);
  }

  componentWillMount() {
    this.initAndUpdate(this.props);
  }

  initAndUpdate = (props) => {
    const { value, checkboxKey, radioKey, userGroup } = props;
    let isShowRadio = value[checkboxKey];
    let isShowUser = isShowRadio && userGroup && value[radioKey] && value[radioKey] != "all";
    this.setState({ isShow: isShowRadio });
    if (!this.isStartGetGroupName && isShowUser && value[`${radioKey.replace("_", "")}`] != "all") {
      this.isStartGetGroupName = true;
      HotelServer(this)
        .getGroupNameById(value[`${radioKey.replace("_", "")}`])
        .then((res) => {
          this.setState({ name: res.data.name, showUser: isShowUser });
        });
    } else {
      this.setState({ showUser: isShowUser });
    }
  };

  onChangeCheckbox = (eve) => {
    this.setState({ isShow: eve.target.checked });
    this.getFormItemValues();
  };

  onRadioGroupChange = (value) => {
    this.getFormItemValues();
  };

  getFormItemValues = () => {
    setTimeout(() => {
      const { value } = this.props;
      const values = this.props.form.getFieldsValue();
      console.log(values);
      this.onChange(Object.assign(value, values));
    });
  };

  onChange = (result) => {
    const { onChange } = this.props;
    onChange && onChange(result);
  };

  render() {
    const { isShow, showUser, name } = this.state;
    const { getFieldDecorator } = this.props.form;
    const { checkboxKey, radioKey, value, checkboxOpt, radioOpt, userIdKey } = this.props;
    return (
      <div>
        <Form>
          <FormItem className="form-item-style">
            {getFieldDecorator(checkboxKey, {
              initialValue: value[checkboxKey],
              valuePropName: "checked",
            })(<Checkbox onChange={this.onChangeCheckbox}>{checkboxOpt.text}</Checkbox>)}
          </FormItem>
          {isShow && (
            <FormItem className="form-item-style">
              {getFieldDecorator(radioKey, {
                initialValue: value[radioKey],
              })(
                <RadioGroup onChange={this.onRadioGroupChange}>
                  {radioOpt.map((item) => {
                    return <Radio value={item.key}>{item.text}</Radio>;
                  })}
                </RadioGroup>
              )}
            </FormItem>
          )}
          {showUser && (
            <FormItem className="form-item-style" style={{ width: "45%" }}>
              {getFieldDecorator(`${radioKey.replace("_", "")}`, {
                initialValue: name
                  ? [
                      {
                        id: value[radioKey.replace("_", "")] || "",
                        name: name || "",
                      },
                    ]
                  : [],
              })(
                <Chooser
                  onChange={this.getFormItemValues}
                  single={true}
                  type="user_group"
                  onlyNeed="id"
                  valueKey="id"
                  labelKey="name"
                  newline
                />
              )}
            </FormItem>
          )}
        </Form>
      </div>
    );
  }
}

export default CheckboxRadio;
